<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="browsermode" content="application">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="Cache" content="no-cache">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <!-- 禁止百度转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta name="format-detection" content="telephone=no">
    <title>我的账户</title>
    <link rel="stylesheet" href="${request.contextPath}/web/css/reset.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/web/css/base.css?v=${verison!}">
    <link rel="stylesheet" href="${request.contextPath}/plug/layui/css/layui.css" media="all">
    <style>
		.personal-data .wrapper {
			margin: .1rem 0;
			background-color: #fff;
			padding: .36rem .3rem .13rem .3rem;
		}
		.personal-data .wrapper .title {
			margin-bottom: .3rem;
			font-size: .32rem;
			color: #282828;
		}
		.personal-data .wrapper .wrapList .item {
			width: 6.9rem;
			height: 1.6rem;
			background-color: #f8f8f8;
			border-radius: .2rem;
			margin-bottom: .22rem;
			padding: 0 .3rem;
			position: relative;
			border: .02rem solid #f8f8f8;
		}
		.personal-data .wrapper .wrapList .item.on {
			border-color: #e93323;
			border-radius: .2rem;
			background: url() no-repeat;
			background-size: 100% 100%;
			background-color: #fff9f9;
		}
		.personal-data .wrapper .wrapList .item .picTxt .text .phone {
			font-size: .24rem;
			color: #999;
			margin-top: .1rem;
		}
		.personal-data .wrapper .wrapList .item .picTxt {
			width: 4.45rem;
		}
		.personal-data .wrapper .wrapList .item .picTxt .pictrue {
			width: .96rem;
			height: .96rem;
			position: relative;
		}
		.g-core-image-upload-btn {
			position: relative;
			overflow: hidden;
		}
		.personal-data .wrapper .wrapList .item .picTxt .pictrue img {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.g-core-image-upload-form {
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			min-height: 61px;
			opacity: 0;
		}
		.g-core-image-corp-container {
			z-index: 1900;
			position: fixed;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			background: rgba(0,0,0,.9);
			color: #f1f1f1;
		}
		.g-core-image-corp-container .image-aside {
			position: absolute;
			right: 30px;
			left: 30px;
			top: 60px;
			bottom: 20px;
			text-align: center;
		}
		.image-aside[data-v-7616bef4] {
			overflow: hidden;
			position: absolute;
			right: 30px;
			left: 30px;
			top: 70px;
			bottom: 40px;
			text-align: center;
		}
		.g-core-image-upload-form input {
			width: 100%;
			height: 100%;
		}
		.g-crop-image-principal[data-v-7616bef4] {
			overflow: hidden;
			position: relative;
			background-color: #fff;
			background-image: -webkit-gradient(linear,left bottom,right top,color-stop(25%,#efefef),color-stop(25%,transparent),color-stop(75%,transparent),color-stop(75%,#efefef),to(#efefef)),-webkit-gradient(linear,left bottom,right top,color-stop(25%,#efefef),color-stop(25%,transparent),color-stop(75%,transparent),color-stop(75%,#efefef),to(#efefef));
			background-image: linear-gradient(to top right,#efefef 25%,transparent 0,transparent 75%,#efefef 0,#efefef),linear-gradient(to top right,#efefef 25%,transparent 0,transparent 75%,#efefef 0,#efefef);
			background-position: 0 0,10px 10px;
			background-size: 21px 21px;
		}
		.g-resize-bar[data-v-6844435b] {
			position: absolute;
			bottom: 0;
			margin: 17px auto;
			height: 6px;
			border-radius: 3px;
			width: 200px;
			margin-left: -100px;
			left: 50%;
			background-color: #a8f9ca;
			-webkit-box-shadow: 0 2px 3px -1px rgba(0,0,0,.3);
			box-shadow: 0 2px 3px -1px rgba(0,0,0,.3);
		}
		.g-resize-highlight[data-v-6844435b] {
			position: absolute;
			left: 0;
			top: 0;
			height: 6px;
			background-color: #27ae60;
			border-radius: 3px;
		}
		.circle-btn[data-v-6844435b] {
			display: block;
			position: absolute;
			left: 0;
			top: -5px;
			width: 14px;
			height: 14px;
			margin-left: -7px;
			background-color: #fff;
			border-radius: 7px;
			-webkit-box-shadow: 0 2px 3px -2px rgba(0,0,0,.6), 0 -2px 3px -2px rgba(0,0,0,.55);
			box-shadow: 0 2px 3px -2px rgba(0,0,0,.6), 0 -2px 3px -2px rgba(0,0,0,.55);
			border-width: 0;
		}
		.personal-data .wrapper .wrapList .item .picTxt .pictrue .alter {
			width: .3rem;
			height: .3rem;
			border-radius: 50%;
			position: absolute;
			bottom: 0;
			right: 0;
		}

		.personal-data .list {
			background-color: #fff;
		}
		.personal-data .list .item {
			padding: .3rem .3rem .3rem 0;
			border-bottom: 1px solid #f2f2f2;
			margin-left: .3rem;
			font-size: .32rem;
			color: #282828;
		}
		.personal-data .list .item .input {
			width: 4.15rem;
			text-align: right;
			color: #868686;
		}
		.personal-data .list .item .input input {
			color: #868686;
			text-align: right;
			width: 100%;
		}
		.personal-data .list .item .input .id {
			width: 3.65rem;
		}
		.personal-data .list .item .input .iconfont {
			font-size: .35rem;
		}
		.icon-suozi:before {
			content: "\E631";
		}
		.personal-data .list .item {
			padding: .3rem .3rem .3rem 0;
			border-bottom: 1px solid #f2f2f2;
			margin-left: .3rem;
			font-size: .32rem;
			color: #282828;
		}
		.personal-data .list .item .input .iconfont.icon-xiangyou {
			font-size: .3rem;
			margin-left: .27rem;
		}
		.icon-xiangyou:before {
			content: "\E679";
		}
		.personal-data .logOut, .personal-data .modifyBnt {
			font-size: .32rem;
			width: 6.9rem;
			height: .9rem;
			text-align: center;
		}
		.personal-data .modifyBnt {
			color: #fff;
			border-radius: .5rem;
			line-height: .9rem;
			margin: .76rem auto 0 auto;
		}
		.personal-data .logOut {
			border-radius: .45rem;
			margin: .3rem auto .7rem auto;
		}
		.personal-data .wrapper .wrapList .item .currentBnt {
			position: absolute;
			right: 0;
			top: 0;
			font-size: .26rem;
			background-color: rgba(233,51,35,.1);
			width: 1.4rem;
			height: .48rem;
			border-radius: 0 .2rem 0 .2rem;
		}
		.personal-data .wrapper .wrapList .item .picTxt .text .name {
			width: 100%;
			font-size: .3rem;
			color: #282828;
		}
		.personal-data .wrapper .wrapList .item .picTxt .text {
            width: 3.25rem;
        }
	</style>
</head>
<body style="background-color: #f5f5f5;">
<div data-role="page">
    <div class="app">
        <div class="personal-data router">
            <div class="wrapper">
                <div class="title">
                    管理我的账号
                </div>
                <div class="wrapList">
                    <div class="item acea-row row-between-wrapper on">
                        <div class="picTxt acea-row row-between-wrapper">
                            <div class="pictrue">
                                <div class="g-core-image-upload-btn btn btn-primary">
                                    <div class="pictrue">
                                        <img src="${data.headImg!}" />
                                    </div>
                                    <form method="post" enctype="multipart/form-data" action="" class="g-core-image-upload-form">
                                        <input name="file" type="file" accept="image/*" />
                                    </form>
                                    <div class="g-core-image-corp-container" style="display: none;">
                                        <div data-v-7616bef4="" class="image-aside">
                                            <div data-v-7616bef4="" class="g-crop-image-box">
                                                <div data-v-7616bef4="" class="g-crop-image-principal">
                                                    <div data-v-7616bef4="" class="image-wrap" style="width: 24px; height: 24px; left: 0px; top: 0px; background-image: url(&quot;&quot;); cursor: move;">
                                                        <img data-v-7616bef4="" src="" style="width: 0px; height: 0px;" />
                                                    </div>
                                                    <div data-v-7616bef4="" class="image-mask">
                                                        <div data-v-7616bef4="" class="mask top" style="top: 0px; left: 0px; width: 100%;"></div>
                                                        <div data-v-7616bef4="" class="mask bottom" style="bottom: 0px; left: 0px; width: 100%;"></div>
                                                        <div data-v-7616bef4="" class="mask left" style="left: 0px;"></div>
                                                        <div data-v-7616bef4="" class="mask right" style="right: 0px;"></div>
                                                    </div>
                                                    <div data-v-7616bef4="" class="crop-box">
                                                        <div data-v-7616bef4="" class="reference-line v"></div>
                                                        <div data-v-7616bef4="" class="reference-line h"></div>
                                                        <a data-v-7616bef4="" class="g-resize"></a>
                                                    </div>
                                                </div>
                                                <div data-v-6844435b="" data-v-7616bef4="" class="g-resize-bar">
                                                    <div data-v-6844435b="" class="g-resize-highlight" style="width: 100%;"></div>
                                                    <button data-v-6844435b="" class="circle-btn" style="left: 100%;"></button>
                                                </div>
                                                <!---->
                                            </div>
                                        </div>
                                        <div class="info-aside">
                                            <p class="btn-groups rotate-groups" style="display: none;"><button type="button" class="btn btn-rotate">↺</button><button type="button" class="btn btn-reverserotate">↻</button></p>
                                            <!---->
                                            <!---->
                                        </div>
                                    </div>
                                </div>
                                <img src="" class="alter" />
                            </div>
                            <div class="text">
                                <div class="name line1">
                                    <#if data.accountName??><#else>${data.id!}</#if>
                                </div>
                                <div class="phone">
                                    绑定手机号：${data.phone!}
                                </div>
                            </div>
                        </div>
                        <div class="currentBnt acea-row row-center-wrapper font-color-red">
                            当前账号
                        </div>
                    </div>
                </div>
            </div>
            <div class="list">
                <div class="item acea-row row-between-wrapper">
                    <div>
                        ID号
                    </div>
                    <div class="input acea-row row-between-wrapper">
                        <input type="text" disabled="disabled" class="id" value="${data.id!}" />
                        <span class="iconfont"><img src="${request.contextPath}/web/images/lock.png" style="width: 19px;"></span>
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div>
                        昵称
                    </div>
                    <div class="input">
                        <input type="text" value="<#if data.userName??>${data.userName!}<#else>${data.nickName!}</#if>" id="userName"/>
                    </div>
                </div>
                <div class="item acea-row row-between-wrapper">
                    <div>
                        手机号码
                    </div>
                    <div class="input">
                        <input type="text" value="${data.phone!}" id="phone"/>
                    </div>
                </div>

                <div class="modifyBnt bg-color-red">
                    保存修改
                </div>
            </div>
        </div>
        <#include "include/right.html" />
    </div>
</body>
<script type="text/javascript" src="${request.contextPath}/web/js/media_750.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/jquery.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="${request.contextPath}/web/js/common.js"></script>
<script src="${request.contextPath}/js/layer.js"></script>
<script>
$(function(){
    $(".modifyBnt").on('click',function(){
        var obj = new Object();
        obj["userName"] = $.trim($("#userName").val());
        obj["phone"] =  $.trim($("#phone").val());
        if("" != obj["phone"] && !isPhoneNo(obj["phone"])){
            layer.msg("手机号码不正确！")
            return;
        }
         $.ajax({
              type: 'POST',
              url: '${request.contextPath}/web/user/update',
              data: JSON.stringify(obj),
              dataType:'json',
              contentType:'application/json',
              success: function(data){
                  layer.msg(data.msg)
                  if(data.code==200){
                   window.location.reload();
                  }
              }
        });
    });
});
</script>
</html>